<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <!-- Compiled and minified CSS -->
    <!-- <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"
    /> -->
    <style></style>

    <!-- Compiled and minified JavaScript -->
    <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script> -->
  </head>
  <body>
    <form action="#">
      <p>
        <label>
          <input type="checkbox" />
          <span>Red</span>
        </label>
      </p>
      <p>
        <label>
          <input type="checkbox" checked="checked" />
          <span>Yellow</span>
        </label>
      </p>
      <p>
        <label>
          <input type="checkbox" class="filled-in" checked="checked" />
          <span>Filled in</span>
        </label>
      </p>
      <p>
        <label>
          <input id="indeterminate-checkbox" type="checkbox" />
          <span>Indeterminate Style</span>
        </label>
      </p>
      <p>
        <label>
          <input type="checkbox" checked="checked" disabled="disabled" />
          <span>Green</span>
        </label>
      </p>
      <p>
        <label>
          <input type="checkbox" disabled="disabled" />
          <span>Brown</span>
        </label>
      </p>
    </form>
  </body>
</html>
